<template>
  <DeeContainer>
    <div class="dee-list-container" slot="dee-main-container">
      <aside class="dee-list-aside"  ref="ListAside">
        <ToggleBtn class="toggle-btn">
          <img slot="toggleBtnImg" :src="btnFoldleft" @click="toggleHandle()"/>
        </ToggleBtn>
        <ProjectTree
        :multiDataPermissions="multiDataPermissions"
        :projectNum="projectNum"
        :projectId="projectId"
        @getProjectIdData="getProjectIdDataHandle"
        />
      </aside>
      <article class="dee-list-article">
          <FieldTree
          :headerListData="headerListFilter"
          ref="FieldTree"
          v-if="isHaveTreetitledata"
          />
      </article>
      <section class="dee-list-section">
          表格内容
      </section>
    </div>
    <Loading slot="dee-loading" v-show="isShowLoading"/>
  </DeeContainer>
</template>
<script>
  import DeeContainer from '@/layout/container';
  import ToggleBtn from '@/components/toggleBtn';
  import Loading from '@/components/loading';
  import FieldTree from './fieldTree';
  import ProjectTree from './projectTree';
  import btnFoldleft from '@/assets/images/btnFoldleft.png';
  import { getFieldData, getBaseInfo, getMultiDataPermissions, getDiseasedbCount } from '@/api/user';
  import { headerDataFiltering, tableInfo } from './fieldDataFilter';
  export default {
    data() {
      return {
        data: 'list',
        btnFoldleft: btnFoldleft,
        isShowLoading: false,
        showAside: false,
        projectId: '',
        multiDataPermissions: [],
        projectNum: {},
        fieldData: {},
        lastUpdateTime: '',
        treetitledata: [],
        isHaveTreetitledata: false
      };
    },
    computed: {
      headerListFilter: function () {
        return this.treetitledata;
      }
    },
    components: {
      DeeContainer,
      ToggleBtn,
      Loading,
      FieldTree,
      ProjectTree
    },
    created() {
      this.init();
    },
    methods: {
      toggleHandle() {
        if (this.showAside) {
          this.$refs.ListAside.style.transform = 'translate3d(-100%,0,0)';
          this.showAside = false;
        } else {
          this.$refs.ListAside.style.transform = 'translate3d(0,0,0)';
          this.showAside = true;
        }
        // console.log(this.showAside);
      },
      init() {
        this.getMultiDataPermissionsData();
      },
      getMultiDataPermissionsData() {
        this.isShowLoading = true;
        console.log(this.isShowLoading);
        getMultiDataPermissions().then((data) => {
          const multiDataPermissions = data.data.permissions.multi_data_permissions;
          if (multiDataPermissions.length === 0) {
            this.$message({ message: '您没有权限，请联系管理员', type: 'warning' });
          } else {
            this.multiDataPermissions = multiDataPermissions;
            this.getProjectId(multiDataPermissions);
          }
        // this.multiDataPermissions = multi_data_permissions
        });
        getDiseasedbCount().then((res) => {
          this.projectNum = res.data.result_data;
        });
      },
      getProjectId(dataArr) { // 第一次进入获得 projectId
        for (let hosItem of dataArr) {
          // console.log(hosItem)
          for (let deparItem of hosItem.department_list) {
            for (let projectIdListItem of deparItem.project_list) {
              if (projectIdListItem.project_type >= 20) {
                if (projectIdListItem.project_type === 31) {
                  console.log(31, projectIdListItem.project_id);
                } else {
                  let projectId = projectIdListItem.project_id;
                  console.log('other', projectId);
                  if (!this.$route.query.projectId) {
                    // 跳转到空路由在跳转回来
                    this.$router.replace({ name: 'empty', query: { projectId: projectId } });
                  } else {
                    this.getBaseInfHandle(this.$route.query.projectId);// 直接找查询参数请求数据
                  }
                  return;
                }
              }
            }
          }
        }
      },
      getProjectIdDataHandle(projectId) {
        // 点击病种 跳转到空路由在跳转回来
        this.$router.replace({ name: 'empty', query: { projectId: projectId } });
      },
      getBaseInfHandle(projectId) { // 获取基本信息
        this.isShowLoading = true;
        getBaseInfo(projectId).then((res) => {
          const data = res.data;
          if (data) {
            // console.log(data.people_show_info);
            let obj = {
              projectId: projectId,
              type: 'header_list'
            };
            this.getFieldDatahandle(obj);
          }
        });
      },
      getFieldDatahandle(obj) { // 获取字段信息
        let fieldDataDb = this.localforage.createInstance({
          name: obj.type + 'fieldDataDb',
          storeName: 'fieldDataDbTable'
        });
        fieldDataDb.getItem(`projectId_${obj.projectId}`).then((value) => {
          if (value) {
            this.lastUpdateTime = value.last_update_time;
            this.fieldData = value.header_list;
          }
          obj.last_update_time = this.lastUpdateTime;
          getFieldData(obj).then((res) => {
            const data = res.data;
            if (data.last_update_time !== this.lastUpdateTime) {
              this.lastUpdateTime = data.last_update_time;
              this.fieldData = data.header_list;
              fieldDataDb.setItem(`projectId_${obj.projectId}`, data);
            }
            // console.log(this.fieldData);
            this.isShowLoading = false;
            let { titledata } = headerDataFiltering(this.fieldData, obj.projectId);
            // this.treetitledata = treetitledata;
            const that = this;
            // console.log(that.lastUpdateTime);
            tableInfo(obj.projectId, that.lastUpdateTime).then(function (value) {
              const treetitledata = titledata.filter(function (v, i) {
                if (v.layout && v.layout.dim_input === 'table') {
                  for (let j = 0; j < value.length; j++) {
                    if (v.title_en === value[j].table_en && value[j].table_fields.length > 0) {
                      v.checked = true;
                    }
                  }
                  v.title_name = '[表格]' + v.title_name;
                  v.chkDisabled = true;
                }
                return v.id.split('_').length !== 4;
              });
              that.treetitledata = treetitledata;
              that.isHaveTreetitledata = true;
              // console.log(treetitledata[0]);
            });
          });
        });
      }
    }
  };
</script>
<style scoped lang="scss">
@import "../../assets/scss/_mixins";
  .dee-list-container{
    padding-top:10px;
    width: 100%;
    height: 100%;
    @include flex-between();
    position: relative;
    @include border-radius('2px');
  }
  .dee-list-aside{
    width: 25%;
    height: 100%;
    max-width: 300px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left:0;
    z-index: 1;
    transform: translate3d(-100%,0,0);
    transition: .3s;
    @include border-radius(3px);
  }
  .dee-list-article{
    width: 20%;
    height: 100%;
    min-width: 200px;
    max-width: 290px;
    // background-color: skyblue;
    margin-right: 10px;
    @include border-radius(3px);
  }
  .dee-list-section{
    width: 75%;
    height: 100%;
    flex: 1;
    background-color: pink;
    @include border-radius(3px);
  }
  .toggle-btn{
    position: absolute;
    top:50%;
    margin-top: -57px;
    left: 100%;
  }
  .toggle-btn img{
    width: 20px;
  }
</style>
